<template>
  <!-- 会员状态 -->
  <van-popup v-model:show="state.show" position="bottom" round>
    <div class="status-popup-box">
      <ul>
        <li class="item text-green" @click="handleChangeStatus(1)">正常</li>
        <li class="item text-red" @click="handleChangeStatus(0)">停用</li>
        <li class="item text-red" @click="handleChangeStatus(2)">禁言</li>
        <li class="item text-red" @click="handleChangeStatus(3)">禁止加入房间</li>
      </ul>
      <div class="h-[10px] bg-[#E4E4E4]"></div>
      <div class="item !border-0" @click="state.show = false">取消</div>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { reqUserBan } from "@/api/user";
import { usePremsStore } from "@/store/modules/prems";
import { toast } from "@/utils/toast";

const props = withDefaults(
  defineProps<{
    uid: number | null;
  }>(),
  {}
);

const emit = defineEmits(["update"]);
const premsStore = usePremsStore();
const state = reactive({
  show: false
});

const open = () => {
  state.show = true;
};

// 修改状态
const handleChangeStatus = async (key: number) => {
  if (!premsStore.isEditUserSetting) {
    toast.info("暂无权限");
    return;
  }
  if (!props.uid) return;
  const loading = toast.loading("修改中...");
  try {
    await reqUserBan({
      UserId: Number(props.uid),
      Status: key
    });
    toast.success("修改状态成功");
    loading.close();
    state.show = false;
    emit("update", props.uid, key);
  } catch (error) {
    loading.close();
    console.log(error);
  }
};
defineExpose({
  open
});
</script>
<style scoped>
.status-popup-box {
  @apply py-[5px];
}
.status-popup-box .item {
  @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
}
</style>
